<template>
	<el-row class="lives-news">
		<el-row class="title">
			<h3>用户列表</h3>
		</el-row>
		<el-row>
			<el-form :inline="true">
			    <el-form-item>
			        <el-button type="primary" @click="showAddDialog"><i class="el-icon-plus el-icon--left"></i>添加用户</el-button>
			    </el-form-item>
			</el-form>
		</el-row>
		<el-row>
			<el-table :data="userList" :row-style="{fontSize:'12px'}" border>
				<el-table-column prop="userId" label="管理员id" align="center" width="120px"></el-table-column>
                <el-table-column prop="username" label="管理员账号" align="center"></el-table-column>
                <el-table-column label="注册时间" align="center" width="200px">
                    <template slot-scope="scope">{{moment(scope.row.registrationTime).format('YYYY-MM-DD HH:mm:ss')}}</template>
                </el-table-column>
                <el-table-column label="上次登录时间" align="center" width="200px">
                    <template slot-scope="scope">{{moment(scope.row.lastLoginTime).format('YYYY-MM-DD HH:mm:ss')}}</template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" type="primary" @click="showUpdatePwdPopup(scope.$index, scope.row)">修改密码</el-button>
                        <el-button size="small" type="danger" @click="deleteUser(scope.$index, scope.row)">删除账号</el-button>
                    </template>
                </el-table-column>
			</el-table>
		</el-row>
		<el-dialog title="新增管理员" :visible.sync="addDialog" width="400px" @close="closeDialog" class="dialog">
		    <el-form :model="newUser" label-width="120px">
		        <el-form-item label="管理员账号">
		            <el-input type="text" v-model="newUser.username" auto-complete="off" placeholder="管理员账号"></el-input>
		        </el-form-item>
		        <el-form-item label="管理员密码">
		            <el-input type="text" v-model="newUser.password" auto-complete="off" placeholder="管理员密码"></el-input>
		        </el-form-item>
		    </el-form>
		    <div slot="footer" class="dialog-footer">
		        <el-button @click="closeDialog">取 消</el-button>
		        <el-button type="primary" @click="addUserFn" :loading="addLoading">确 定</el-button>
		    </div>
		</el-dialog>
		<el-dialog title="修改密码" :visible.sync="updatePwdDialog" width="400px" @close="closeUpdatePwdDialog" class="dialog">
			    <el-form :model="password" label-width="120px">
			        <el-form-item label="原密码">
			            <el-input type="text" v-model="password.password" auto-complete="off" placeholder="原密码"></el-input>
			        </el-form-item>
			        <el-form-item label="新密码">
			            <el-input type="text" v-model="password.newPassword" auto-complete="off" placeholder="新密码"></el-input>
			        </el-form-item>
			    </el-form>
		    <div slot="footer" class="dialog-footer">
		        <el-button @click="cancelUpdatePwd">取 消</el-button>
		        <el-button type="primary" @click="updatePwdFn" :loading="addLoading">确 定</el-button>
		    </div>
		</el-dialog>
	</el-row>
</template>
<script>
import {
	getUserLists,
	addUser,
	updatePwd,
	deleteUserById,
	updateUserById
} from '@/api/api'
export default {
	data: function(){
		return {
			addDialog: false,
			addLoading: false,
			updatePwdDialog: false,
			userList: null,
			newUser: {
				password: null,
				username: null
			},
			password: {
				password:null,
				newPassword: null
			},
			userId: 0
		}
	},
	created: function(){
		this.getUserList();
	},
	methods: {
		getUserList: function(){
			getUserLists({params: this.params}).then(res => {
				this.userList =res;
			})
		},
		showAddDialog: function(){
			this.addDialog = true;
		},
		closeDialog: function(){
			this.addDialog = false;
			this.newUser = {
				userId: 0,
				password: null,
				username: null
			}
		},
		addUserFn: function(){
			addUser(this.newUser).then(res => {
				this.getUserList();
				this.$message({
					type: 'success',
					message: '添加成功'
				})
				this.addDialog = false;
			})
		},
		deleteUser: function(index, row){
            this.$confirm('是否删除该管理员账号?', '删除管理员账号', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'danger'
            }).then(() => {
				deleteUserById(row.userId).then(res => {
					console.log(res)
					this.getUserList();
					this.$message({
						type: 'success',
						message: '删除成功'
					})
					this.addDialog = false;
				})
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
            
		},
		closeUpdatePwdDialog: function(){
			this.updatePwdDialog = false;
			this.userId=0;
			this.password = {
				password: null,
				newPassword: null
			}
		},
		cancelUpdatePwd: function(){
			this.closeUpdatePwdDialog()
		},
		showUpdatePwdPopup: function(index, row){
			this.updatePwdDialog = true;
			this.userId = row.userId;
			this.password.userId = this.userId;
		},
		updatePwdFn: function(){
			console.log(this.password)
			updatePwd(this.password).then(res => {
				this.getUserList();
				this.$message({
					type: 'success',
					message: '修改成功'
				})
				this.updatePwdDialog = false;
			})
		}
	}
}
</script>
<style scoped>
.title {
    font-size: 12px;
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 5px;
    
}
h3 {
    display: inline-block;
    padding: 5px 0;
    margin: 0;
    font-weight: normal;
    color: #23b7e5;
    border-bottom: 1px solid #23b7e5;
}
</style>